import styled from 'styled-components'
import logo from "../../statics/logo.png"
export const HeaderWrapper = styled.div`
    height:56px;
    width:100%;
    border-bottom: 1px solid #f0f0f0;
`;
export const W1200 = styled.div`
    width:1440px;
    margin:0 auto;
    position:relative;
`;

export const Logo = styled.a.attrs({
    href: "/"
})`
    height:58px;
    width:100px; 
    display:block;
    position: absolute;
    top:0;
    left:0;
    background:url(${logo}) no-repeat 0 0;
    background-size: 100% ;
    `
export const Nav = styled.div`
    width:960px;  
    margin:0 auto;
    height:58px;
`;
export const Navitem = styled.div`
line-height:56px;
padding:0 15px;
color:#333;
font-size:17px;
    &.active{
        color: #ea6f5a;
        font-weight:bold;
    }
   &.left{
       float:left;
   }
   &.right{
       float:right;
       color: #969696;
   }
`;
export const SearchWrapper = styled.div`
    float:left;
    position: relative;
    .slide-enter{
        width:170px;
        transition:all .5s;
    }
    .slide-enter-active{
        width:230px;
    }
    .slide-exit {
            width: 230px;
            transition: all .5s;
        }
    .slide-exit-active {
            width: 170px;
    }
    .zoom{
        font-size:20px;
        position:absolute;  
        bottom:6px;
        right:10px;
        border-radius:50%;
        padding:3px;
        &.focuesd{
            background:#777;
            color:#fff;
        }
    }
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})` &.slide-enter{
        width:170px;
        transition:all .5s;
    }
    &.slide-enter-active{
        width:230px;
    }
    &.slide-exit {
            width: 230px;
            transition: all .5s;
        }
    &.slide-exit-active {
            width: 170px;
    }
    width:170px;  
    height:38px;
    border:none;
    outline:none;
    border-radius:19px;
    background:#eee;
    margin-top:9px;
    padding:0 20px;
    box-sizing:border-box;
    margin-left:20px;
    &::placeholder{
        color:#999;
    }
    box-sizing:border-box;
    padding-right:40px;
    &.focuesd{
        width:200px;
        .iconfont
    }
`;
export const Addition = styled.div`
   position:absolute;
   right:0;
   top:0;
   height:56px;
`;
export const Button = styled.div`
   float:right;
   line-height:38px;
   border-radius:19px;
   margin-top:9px;
   border:1px solid #ec6149;
   margin-right:20px;
   padding:0 20px;
   font-size:14px;
   &.reg{
       color: #ec6149;
   }
   &.ret {
       color: #fff;
       background:#ec6149;
`;
export const Icon = styled.span`
    font-size:16px;
`;
export const Aa = styled.span`
    font-size:20px;
`;
export const SearchInfo = styled.div`
    position:absolute;
    left:0;
    top:56px;
    width:240px;
    box-shadow:0 0 8px rgba(0,0,0,.2);
    padding:0 20px;
`;
export const SearchInfoTitle = styled.div`
    margin-top:15px;
    margin-bottom:15px;
    line-height:20px;
    font-size:14px;
    color:#969696
`;
export const SearchInfoSwitch = styled.span`
    float:right;
    font-size:13px;
    cursor:pointer;
    .spin {
        font-size:12px;
        margin-right:2px;
        transition:all .2 esse-in;
        display:block;
        float:left;
        transform:rotate(0deg);
        transform-origin:center center;
    }
`;
export const SearchInfoItem = styled.a`
   font-size:12px;
   padding:6px;
   border:1px solid #ddd;
   color:#777;
   border-radius:2px;
   display:block;
   float:left;
   margin-right:10px;
   margin-bottom:15px;
   
`;